import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Popover, Space, Tooltip } from 'antd';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import styles from './index.less';

export const PopConfirmButton: React.FC<PopConfirmButtonProps> = forwardRef(
  (props, ref) => {
    const [confirmStopVisible, setConfirmStopVisible] =
      useState<boolean>(false);

    const {
      popTitle,
      btnDisabled,
      cancelText = '取消',
      confirmText = '确认',
      otherConfirmText = null,
      btnText,
      onCancel = () => {},
      onConfirm = () => {},
      onOtherConfirm = () => {},
      tooltipText,
    } = props;

    useImperativeHandle(
      ref,
      () => ({
        closePopConfirm: () => {
          setConfirmStopVisible(false);
        },
      }),
      [confirmStopVisible],
    );

    const content = (
      <>
        <div className={styles.tooltipContent}>
          <ExclamationCircleFilled className={styles.tooltipIcon} />
          {popTitle}
        </div>
        <div>
          {
            <Space className={styles.tooltipFooter}>
              {cancelText && (
                <Button
                  size="small"
                  onClick={() => {
                    onCancel();
                    setConfirmStopVisible(false);
                  }}
                >
                  {cancelText}
                </Button>
              )}
              {confirmText && (
                <Button
                  size="small"
                  type={!otherConfirmText ? 'primary' : 'default'}
                  onClick={() => {
                    onConfirm();
                    setConfirmStopVisible(false);
                  }}
                >
                  {confirmText}
                </Button>
              )}
              {otherConfirmText && (
                <Button
                  size="small"
                  type="primary"
                  onClick={() => {
                    onOtherConfirm();
                    setConfirmStopVisible(false);
                  }}
                >
                  {otherConfirmText}
                </Button>
              )}
            </Space>
          }
        </div>
      </>
    );

    const Btn = (
      <Button
        type="link"
        size="small"
        onClick={() => {
          setConfirmStopVisible(true);
        }}
        disabled={btnDisabled}
      >
        {btnText}
      </Button>
    );

    return (
      <div>
        {tooltipText ? (
          <Tooltip
            title={tooltipText}
            placement="top"
            overlayStyle={{ maxWidth: 200 }}
          >
            {Btn}
          </Tooltip>
        ) : (
          <>
            <Popover
              placement="topRight"
              title={false}
              overlayStyle={{ maxWidth: 250 }}
              content={content}
              open={confirmStopVisible}
              trigger="click"
            >
              {Btn}
            </Popover>
          </>
        )}
      </div>
    );
  },
);

interface PopConfirmButtonProps {
  btnText?: string;
  btnDisabled?: boolean;
  popTitle?: string;
  cancelText?: string;
  otherConfirmText?: string | null;
  confirmText?: string;
  onOtherConfirm?: () => void;
  onConfirm?: () => void;
  onCancel?: () => void;
  tooltipText?: string;
  ref?: any;
}
